<template>
    <div class="detail">
        <el-form ref="form"
                 :rules="rules"
                 :model="form"
                 label-width="80px"
                 :disabled="operation.type === 'look'"
                 >
            <el-form-item label="标题" prop="stem">
                <el-input v-model="form.stem"></el-input>
            </el-form-item>
            <el-form-item v-if="operation.type === 'add' || operation.type === 'edit'" label="内容" prop="content">
                <quill-editor v-model="form.content" @blur="$refs.form.validateField('content')"></quill-editor>
            </el-form-item>
            <el-form-item v-if="operation.type === 'look'" label="内容" prop="content">
                <div class="lookContent" v-html="form.content"></div>
            </el-form-item>
            <el-form-item v-if="operation.type === 'add' || operation.type === 'edit'">
                <el-button type="primary" @click="submit('form')">保存</el-button>
                <el-button @click="clear">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { editArticle, setArticle } from '@/api/article'

export default {
    name: 'DetailPage',
    components: {
        quillEditor
    },
    props: {
        operation: true
    },
    data () {
        return {
            form: {},
            operationData: this.operation,
            rules: {
                stem: [
                    { required: true, message: '请输入标题', trigger: 'input' }
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'input' }
                ]
            }
        }
    },
    methods: {
        submit (formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.operation.type === 'add') {
                        const res = await setArticle(this.form)
                        res.status === 200 ? this.$message.success('添加成功') : this.$message.error('添加失败')
                        this.form = {}
                        this.$emit('closeDrawer')
                    } else if (this.operation.type === 'edit') {
                        const data = {
                            id: this.operationData.id,
                            stem: this.form.stem,
                            content: this.form.content
                        }
                        const res = await editArticle(data)
                        res.status === 200 ? this.$message.success('修改成功') : this.$message.error('修改失败')
                        this.form = {}
                        this.$emit('closeDrawer')
                    }
                    return true
                } else {
                    return false
                }
            })
        },
        clear () {
            if (this.operation.type === 'add') {
                this.$confirm('取消后将清空内容并退出, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form = {}
                    this.$emit('closeDrawer', 'add')
                }).catch(() => {})
            } else if (this.operation.type === 'edit') {
                this.$confirm('取消后将不保存修改并退出, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form = {}
                    this.$emit('closeDrawer', 'edit')
                }).catch(() => {})
            }
        },
    },
    watch: {
        operationData: {
            immediate: true,
            deep: true,
            handler(newVal) {
                this.$set(this.form, 'stem', newVal.data.stem)
                this.$set(this.form, 'content', newVal.data.content)
            }
        }
    }
}
</script>

<style scoped lang="less">
.detail {
    padding: 0 20px;

    .lookContent {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        padding: 0 15px;
    }

    ::v-deep .el-textarea {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
    }
}
</style>
